import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, SafeAreaView, ActivityIndicator, Image, TouchableOpacity, Modal, Dimensions, Switch, ScrollView, Alert, TextInput } from 'react-native';
import Header from '../../../../components/Header';
import { getDeviceSpotDetailApi, getDeviceSpotRecordApi, execDeviceSpotApi, confirmSpotCheckPlanApi } from './api';
import { launchCamera, launchImageLibrary, ImagePickerResponse } from 'react-native-image-picker';
import { PermissionsAndroid, Platform } from 'react-native';
import { Toast } from '@ant-design/react-native';
import xiangjiIcon from '../../../../assets/xiangji.png';
import xIcon from '../../../../assets/x.png';

interface DeviceSpotDetailProps {
    onNavigateToLogin?: () => void;
    onBackPress?: () => void;
    onNavigateToScreen?: (route: string) => void;
}

const DeviceSpotDetail: React.FC<DeviceSpotDetailProps> = ({ onNavigateToLogin, onBackPress, onNavigateToScreen }) => {
    const [loading, setLoading] = useState(true);
    const [detailData, setDetailData] = useState<any>(null);
    const [imageModalVisible, setImageModalVisible] = useState(false);
    const [selectedImage, setSelectedImage] = useState<string>('');
    const [checkStates, setCheckStates] = useState<{ [key: string]: boolean }>({});
    const [uploadedImages, setUploadedImages] = useState<string[]>([]);
    const [confirmModalVisible, setConfirmModalVisible] = useState(false);
    const [confirmRemark, setConfirmRemark] = useState('');

    // 点检状态映射
    const SPOT_STATE_MAP: { [key: number]: string } = {
        1: '待点检',
        2: '点检中',
        3: '已完成',
        4: '已逾期',
    };

    useEffect(() => {
        // 从全局获取传递的plan_id
        const planId = (global as any).spotDetailPlanId;
        // console.log('点检任务详情页面 - 接收到的plan_id:', planId);

        if (planId) {
            loadSpotDetail(planId);
        } else {
            console.log('未找到plan_id，无法加载详情');
            setLoading(false);
        }
    }, []);

    const loadSpotDetail = async (planId: string) => {
        try {
            setLoading(true);

            // 先获取基本信息来确定状态
            const basicResult = await getDeviceSpotDetailApi(planId);
            console.log('=== 获取基本信息 ===');
            console.log('基本信息:', basicResult?.data);

            const planData = basicResult?.data?.plan;
            const state = planData?.state;

            console.log('当前状态:', state, SPOT_STATE_MAP[state]);

            let result;

            // 根据状态选择不同的接口
            if (state === 1) {
                // 待点检 - 使用原接口
                console.log('=== 使用待点检接口 ===');
                result = basicResult;
            } else if (state === 2 || state === 3) {
                // 待复核(2) 或 已复核(3) - 使用新接口
                console.log('=== 使用待复核/已复核接口 ===');
                const deviceId = planData?.device_id;
                const cycleId = planData?.cycle_id;

                if (deviceId && cycleId) {
                    result = await getDeviceSpotRecordApi(deviceId, planId, cycleId);
                } else {
                    console.error('缺少必要参数:', { deviceId, planId, cycleId });
                    throw new Error('缺少必要参数');
                }
            } else {
                // 其他状态使用原接口
                console.log('=== 使用默认接口 ===');
                result = basicResult;
            }

            console.log('=== 最终数据 ===');
            console.log('完整返回数据:', result);
            console.log('详情数据:', result?.data);

            // 根据状态处理不同的数据结构
            if (state === 1) {
                // 待点检 - 使用 spot_list
                console.log('点检项列表:', result?.data?.spot_list);
            } else if (state === 2 || state === 3) {
                // 待复核/已复核 - 使用 item_list
                console.log('点检项列表:', result?.data?.item_list);
                console.log('图片列表:', result?.data?.pic_list);
            }
            console.log('================================');

            setDetailData(result?.data || null);

            // 初始化检查项状态
            if (state === 1 && result?.data?.spot_list) {
                // 待点检状态 - 使用 spot_list
                const initialStates: { [key: string]: boolean } = {};
                result.data.spot_list.forEach((category: any) => {
                    category.children?.forEach((item: any) => {
                        initialStates[item.id] = false; // false表示选中状态
                    });
                });
                setCheckStates(initialStates);
                console.log('=== 初始化检查项状态(待点检) ===');
                console.log('初始状态:', initialStates);
                console.log('========================');
            } else if ((state === 2 || state === 3) && result?.data?.item_list) {
                // 待复核/已复核状态 - 使用 item_list
                const initialStates: { [key: string]: boolean } = {};
                result.data.item_list.forEach((item: any) => {
                    // 设置父级检查项状态
                    initialStates[item.id] = item.normal; // 不取反

                    // 设置子级检查项状态
                    if (item.children && item.children.length > 0) {
                        item.children.forEach((child: any) => {
                            initialStates[child.id] = child.normal; // 不取反
                        });
                    }
                });
                setCheckStates(initialStates);
                console.log('=== 初始化检查项状态(待复核/已复核) ===');
                console.log('初始状态:', initialStates);
                console.log('========================');
            }
        } catch (error) {
            console.log('获取点检任务详情失败:', error);
        } finally {
            setLoading(false);
        }
    };

    // 处理开关状态变化
    const handleToggleChange = (itemId: string, value: boolean) => {
        setCheckStates(prev => ({
            ...prev,
            [itemId]: value
        }));
    };

    const requestCameraPermission = async () => {
        if (Platform.OS === 'android') {
            try {
                const granted = await PermissionsAndroid.request(
                    PermissionsAndroid.PERMISSIONS.CAMERA,
                    {
                        title: '相机权限',
                        message: '应用需要访问您的相机来拍摄照片',
                        buttonNeutral: '稍后询问',
                        buttonNegative: '取消',
                        buttonPositive: '确定',
                    }
                );
                return granted === PermissionsAndroid.RESULTS.GRANTED;
            } catch (err) {
                console.warn(err);
                return false;
            }
        }
        return true;
    };

    const handleImageUpload = () => {
        const options = {
            mediaType: 'photo' as const,
            includeBase64: false,
            maxHeight: 2000,
            maxWidth: 2000,
        };

        // 显示选择器
        Alert.alert(
            '选择图片来源',
            '请选择图片来源',
            [
                {
                    text: '取消',
                    style: 'cancel',
                },
                {
                    text: '拍照',
                    onPress: () => launchCamera(options, handleImageResponse),
                },
                {
                    text: '从相册选择',
                    onPress: () => launchImageLibrary(options, handleImageResponse),
                },
            ]
        );
    };

    const handleImageResponse = (response: ImagePickerResponse) => {
        if (response.didCancel) {
            // console.log('用户取消了选择');
        } else if (response.errorCode) {
            // console.log('ImagePicker Error: ', response.errorMessage);
        } else if (response.assets && response.assets[0]) {
            const imageUri = response.assets[0].uri;
            if (imageUri) {
                setUploadedImages(prev => [...prev, imageUri]);
            }
        }
    };

    // 处理复核确认
    const handleConfirm = async () => {
        if (!confirmRemark.trim()) {
            Toast.fail('请输入复核意见');
            return;
        }

        try {
            const planId = detailData?.plan?.id;
            if (!planId) {
                Toast.fail('缺少计划ID');
                return;
            }

            const response = await confirmSpotCheckPlanApi(planId, confirmRemark.trim());

            // 检查响应状态码
            if (response?.code === 0) {
                // 业务逻辑错误，显示错误消息
                const errorMessage = response?.msg || '复核失败';
                Toast.fail(errorMessage);
                return;
            }

            // 成功情况，使用接口返回的消息
            const message = response?.msg || '复核成功';
            Toast.success(message);

            // 关闭模态框
            setConfirmModalVisible(false);
            setConfirmRemark('');

            // 延迟一下再返回，让用户看到成功提示
            setTimeout(() => {
                if (onBackPress) {
                    onBackPress();
                }
            }, 500);
        } catch (error: any) {
            console.error('复核点检计划失败:', error);
            // 使用错误信息中的msg，如果没有则使用默认消息
            const errorMessage = error?.message || '复核失败，请重试';
            Toast.fail(errorMessage);
        }
    };

    const handleSave = async () => {
        try {
            // 构建检查项记录
            const recordList: any[] = [];

            // 根据数据结构构建记录
            if (detailData?.spot_list) {
                // 待点检状态 - 使用 spot_list
                detailData.spot_list.forEach((category: any) => {
                    category.children?.forEach((item: any) => {
                        recordList.push({
                            check_id: item.check_id,
                            normal: !checkStates[item.id] // 取反，false表示正常
                        });
                    });
                });
            } else if (detailData?.item_list) {
                // 待复核/已复核状态 - 使用 item_list
                detailData.item_list.forEach((category: any) => {
                    // 添加父级检查项
                    recordList.push({
                        check_id: category.check_id,
                        normal: !checkStates[category.id] // 取反，false表示正常
                    });

                    // 添加子级检查项
                    category.children?.forEach((item: any) => {
                        recordList.push({
                            check_id: item.check_id,
                            normal: !checkStates[item.id] // 取反，false表示正常
                        });
                    });
                });
            }

            // 构建图片列表
            const picList: any[] = [];

            // 添加服务器返回的图片（待复核/已复核状态）
            if (detailData?.pic_list) {
                detailData.pic_list.forEach((pic: any) => {
                    picList.push({
                        link: pic.link,
                        file_name: pic.file_name || "",
                        file_type: pic.file_type || "",
                        sha1: pic.sha1 || "",
                        file_size: pic.file_size || 0
                    });
                });
            }

            // 添加新上传的图片
            uploadedImages.forEach(imageUri => {
                picList.push({
                    link: imageUri,
                    file_name: "",
                    file_type: "",
                    sha1: "",
                    file_size: 0
                });
            });

            // 构建请求数据
            const requestData = {
                plan: {
                    id: detailData?.plan?.id,
                    plan_id: detailData?.plan?.id,
                    plan_num: detailData?.plan?.plan_num,
                    cycle_id: detailData?.plan?.cycle_id
                },
                device: {
                    id: detailData?.plan?.device_id
                },
                record_list: recordList,
                pic_list: picList
            };

            // 打印提交的数据日志
            console.log('=== 点检任务保存 - 提交数据 ===');
            console.log('请求数据:', requestData);

            const response = await execDeviceSpotApi(requestData);
            console.log('=== 保存点检任务接口返回 ===');
            console.log('完整响应:', response);
            console.log('响应状态:', response?.code);
            console.log('响应消息:', response?.msg);
            console.log('响应数据:', response?.data);
            console.log('================================');

            // 检查响应状态码
            if (response?.code === 0) {
                // 业务逻辑错误，显示错误消息
                const errorMessage = response?.msg || '操作失败';
                Toast.fail(errorMessage);
                return; // 不执行后续的成功逻辑
            }

            // 成功情况，使用接口返回的消息
            const message = response?.msg || '点检任务保存成功';
            Toast.success(message);

            // 延迟一下再返回，让用户看到成功提示
            setTimeout(() => {
                if (onBackPress) {
                    onBackPress();
                }
            }, 500);
        } catch (error: any) {
            console.error('保存点检任务失败:', error);
            // 使用错误信息中的msg，如果没有则使用默认消息
            const errorMessage = error?.message || '保存失败，请重试';
            Toast.fail(errorMessage);
        }
    };

    return (
        <SafeAreaView style={styles.container}>
            <Header
                title="点检任务详情"
                showBackButton={true}
                onNavigateToLogin={onNavigateToLogin}
                onBackPress={onBackPress}
            />

            {loading ? (
                <View style={styles.loadingContainer}>
                    <ActivityIndicator size="large" color="#0076ff" />
                    <Text style={styles.loadingText}>加载中...</Text>
                </View>
            ) : (
                <ScrollView contentContainerStyle={styles.content}>
                    {detailData && detailData.plan && (
                        <>
                            <View style={styles.card}>
                                <View style={styles.cardHeader}>
                                    <View style={styles.deviceInfo}>
                                        {detailData.plan.device_link ? (
                                            <TouchableOpacity
                                                style={styles.imageContainer}
                                                onPress={() => {
                                                    // console.log('点击了图片:', detailData.plan.device_link);
                                                    setSelectedImage(String(detailData.plan.device_link));
                                                    setImageModalVisible(true);
                                                }}
                                            >
                                                <Image
                                                    source={{ uri: String(detailData.plan.device_link) }}
                                                    style={styles.deviceImg}
                                                    resizeMode="contain"
                                                    onError={e => { console.log('图片加载失败', detailData.plan.device_link, e.nativeEvent); }}
                                                />
                                            </TouchableOpacity>
                                        ) : (
                                            <View style={styles.deviceImg} />
                                        )}
                                        <Text style={styles.deviceNum}>{detailData.plan.device_num}</Text>
                                    </View>
                                    <View style={styles.statusButton}>
                                        <Text style={styles.statusText}>{SPOT_STATE_MAP[detailData.plan.state] || '未知'}</Text>
                                    </View>
                                </View>
                                <View style={styles.cardDetails}>
                                    <View style={styles.detailRowGroup}>
                                        <View style={styles.detailItemVertical}>
                                            <Text style={styles.detailLabel}>计划时间</Text>
                                            <Text style={styles.detailValue}>{detailData.plan.plan_day || '无'}</Text>
                                        </View>
                                        <View style={styles.detailItemVertical1}>
                                            <Text style={styles.detailLabel}>计划类型</Text>
                                            <Text style={styles.detailValue}>
                                                {detailData.plan.cycle_type === 1 ? '日' :
                                                    detailData.plan.cycle_type === 2 ? '周' :
                                                        detailData.plan.cycle_type === 3 ? '月' :
                                                            detailData.plan.cycle_type === 4 ? '年' : '未知'}
                                            </Text>
                                        </View>
                                    </View>
                                </View>
                                <View style={styles.planNumberContainer}>
                                    <Text style={styles.detailLabel}>计划单号</Text>
                                    <Text style={styles.detailValue}>{detailData.plan.plan_num || '无'}</Text>
                                </View>
                            </View>

                            {/* 点检项卡片 */}
                            <View style={styles.spotItemCard}>
                                <View style={styles.spotItemLeft}>
                                    <Text style={styles.spotItemText}>点检项（默认正常）</Text>
                                    <Text style={styles.requiredMark}>*</Text>
                                </View>
                                <View style={styles.spotItemRight}>
                                    <Text style={styles.spotItemStatus}>是否正常</Text>
                                </View>
                            </View>

                            {/* 渲染点检项数据 */}
                            {detailData.spot_list && detailData.spot_list.map((category: any) => (
                                <View key={category.id} style={styles.checkCategoryCard}>
                                    <Text style={styles.checkCategoryTitle}>{category.check_name}</Text>
                                    {category.children && category.children.map((item: any) => (
                                        <View key={item.id} style={styles.checkItemRow}>
                                            <Text style={styles.checkItemName}>{item.check_name}</Text>
                                            <Switch
                                                value={checkStates[item.id]} // 不取反，true为开，false为关
                                                onValueChange={(value) => handleToggleChange(item.id, value)} // 不取反
                                                trackColor={{ false: '#767577', true: '#81b0ff' }}
                                                thumbColor={checkStates[item.id] ? '#f5dd4b' : '#f4f3f4'}
                                                ios_backgroundColor="#3e3e3e"
                                            />
                                        </View>
                                    ))}
                                </View>
                            ))}

                            {/* 渲染item_list数据（待复核/已复核状态） */}
                            {detailData.item_list && detailData.item_list.map((category: any) => (
                                <View key={category.id} style={styles.checkCategoryCard}>
                                    <Text style={styles.checkCategoryTitle}>{category.check_name}</Text>
                                    {category.children && category.children.map((item: any) => (
                                        <View key={item.id} style={styles.checkItemRow}>
                                            <Text style={styles.checkItemName}>{item.check_name}</Text>
                                            <Switch
                                                value={checkStates[item.id]} // 不取反，true为开，false为关
                                                onValueChange={(value) => handleToggleChange(item.id, value)} // 不取反
                                                trackColor={{ false: '#767577', true: '#81b0ff' }}
                                                thumbColor={checkStates[item.id] ? '#f5dd4b' : '#f4f3f4'}
                                                ios_backgroundColor="#3e3e3e"
                                            />
                                        </View>
                                    ))}
                                </View>
                            ))}

                            {/* 上传图片卡片 */}
                            <View style={styles.uploadCard}>
                                <Text style={styles.uploadTitle}>上传图片</Text>

                                <View style={styles.imagesRow}>
                                    {/* 显示服务器返回的图片（待复核/已复核状态） */}
                                    {detailData?.pic_list && detailData.pic_list.map((pic: any, index: number) => (
                                        <View key={`server-${index}`} style={styles.imageItem}>
                                            <TouchableOpacity
                                                onPress={() => {
                                                    setSelectedImage(pic.link);
                                                    setImageModalVisible(true);
                                                }}
                                            >
                                                <Image source={{ uri: pic.link }} style={styles.uploadedImage} />
                                            </TouchableOpacity>
                                        </View>
                                    ))}

                                    {/* 显示新上传的图片 */}
                                    {uploadedImages.map((imageUri, index) => (
                                        <View key={`new-${index}`} style={styles.imageItem}>
                                            <TouchableOpacity
                                                onPress={() => {
                                                    setSelectedImage(imageUri);
                                                    setImageModalVisible(true);
                                                }}
                                            >
                                                <Image source={{ uri: imageUri }} style={styles.uploadedImage} />
                                            </TouchableOpacity>
                                            <TouchableOpacity
                                                style={styles.removeImageButton}
                                                onPress={() => {
                                                    setUploadedImages(prev => prev.filter((_, i) => i !== index));
                                                }}
                                            >
                                                <Image source={xIcon} style={styles.removeImageIcon} />
                                            </TouchableOpacity>
                                        </View>
                                    ))}

                                    {/* 上传按钮 */}
                                    <TouchableOpacity style={styles.uploadArea} onPress={handleImageUpload}>
                                        <View style={styles.uploadIconContainer}>
                                            <Image source={xiangjiIcon} style={styles.uploadIcon} />
                                        </View>
                                        <Text style={styles.uploadText}>点击上传</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>

                            {/* 根据状态显示不同的按钮 */}
                            {detailData?.plan?.state === 2 ? (
                                // 待复核状态 - 显示复核按钮
                                <TouchableOpacity
                                    style={styles.saveButton}
                                    onPress={() => setConfirmModalVisible(true)}
                                >
                                    <Text style={styles.saveButtonText}>复核</Text>
                                </TouchableOpacity>
                            ) : detailData?.plan?.state === 3 ? (
                                // 已复核状态 - 不显示按钮
                                null
                            ) : (
                                // 其他状态 - 显示保存按钮
                                <TouchableOpacity style={styles.saveButton} onPress={handleSave}>
                                    <Text style={styles.saveButtonText}>保存</Text>
                                </TouchableOpacity>
                            )}

                            {/* 已复核状态显示复核意见 */}
                            {detailData?.plan?.state === 3 && detailData?.plan?.confirm_remark && (
                                <View style={styles.confirmRemarkCard}>
                                    <Text style={styles.confirmRemarkTitle}>复核意见</Text>
                                    <Text style={styles.confirmRemarkContent}>{detailData.plan.confirm_remark}</Text>
                                </View>
                            )}
                        </>
                    )}
                </ScrollView>
            )}

            {/* 图片全屏显示模态框 */}
            <Modal visible={imageModalVisible} transparent={true} animationType="fade">
                <View style={styles.imageModalContainer}>
                    <TouchableOpacity
                        style={styles.imageModalOverlay}
                        onPress={() => setImageModalVisible(false)}
                    >
                        <Image
                            source={{ uri: selectedImage }}
                            style={styles.fullScreenImage}
                            resizeMode="contain"
                        />
                    </TouchableOpacity>
                </View>
            </Modal>

            {/* 复核意见模态框 */}
            <Modal visible={confirmModalVisible} transparent={true} animationType="slide">
                <View style={styles.confirmModalContainer}>
                    <View style={styles.confirmModalContent}>
                        <Text style={styles.confirmModalTitle}>确认</Text>
                        <TextInput
                            style={styles.confirmInput}
                            placeholder="请输入复核意见"
                            placeholderTextColor="#999"
                            value={confirmRemark}
                            onChangeText={setConfirmRemark}
                            multiline={true}
                            numberOfLines={4}
                            textAlignVertical="top"
                        />
                        <View style={styles.confirmButtonRow}>
                            <TouchableOpacity
                                style={styles.cancelButton}
                                onPress={() => {
                                    setConfirmModalVisible(false);
                                    setConfirmRemark('');
                                }}
                            >
                                <Text style={styles.cancelButtonText}>取消</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                style={styles.confirmButton}
                                onPress={handleConfirm}
                            >
                                <Text style={styles.confirmButtonText}>确认</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </Modal>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    loadingContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    loadingText: {
        marginTop: 10,
        fontSize: 16,
        color: '#666',
    },
    content: {
        flexGrow: 1, // Allow ScrollView to grow and take available space
        padding: 10,
    },
    card: {
        backgroundColor: '#fff',
        borderRadius: 10,
        marginBottom: 14,
        padding: 12,
        shadowColor: '#000',
        shadowOpacity: 0.04,
        shadowRadius: 4,
        shadowOffset: { width: 0, height: 2 },
        elevation: 2,
    },
    cardHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 8,
    },
    deviceInfo: {
        flexDirection: 'row',
        alignItems: 'center',
        flex: 1,
    },
    deviceImg: {
        width: 50,
        height: 50,
        borderRadius: 6,
        backgroundColor: '#eee',
        marginRight: 12,
    },
    deviceNum: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#222',
    },
    statusButton: {
        backgroundColor: '#fff',
        borderRadius: 4,
        paddingVertical: 6,
        paddingHorizontal: 12,
        borderWidth: 1,
        borderColor: '#ff4444',
    },
    statusText: {
        fontSize: 12,
        color: '#ff4444',
        fontWeight: 'bold',
    },
    cardDetails: {
        marginTop: 8,
        backgroundColor: '#f8f8f8',
        borderRadius: 8,
        padding: 12,
        paddingHorizontal: 15,
    },
    detailRowGroup: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 6,
        paddingHorizontal: 0,
    },
    detailItemVertical: {
        flex: 0,
        width: '24%',
    },
    detailItemVertical1: {
        flex: 0,
        width: '20%',
    },
    detailLabel: {
        fontSize: 13,
        color: '#666',
        marginBottom: 4,
    },
    detailValue: {
        fontSize: 12,
        color: '#333',
        textAlign: 'left',
    },
    planNumberContainer: {
        marginTop: 8,
        backgroundColor: '#f8f8f8',
        borderRadius: 8,
        padding: 12,
        paddingHorizontal: 15,
    },
    imageContainer: {
        position: 'relative',
        zIndex: 10,
    },
    imageModalContainer: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.9)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    imageModalOverlay: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        height: '100%',
    },
    fullScreenImage: {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,
    },
    spotItemCard: {
        backgroundColor: '#fff',
        borderRadius: 10,
        marginBottom: 14,
        padding: 12,
        shadowColor: '#000',
        shadowOpacity: 0.04,
        shadowRadius: 4,
        shadowOffset: { width: 0, height: 2 },
        elevation: 2,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    spotItemLeft: {
        flexDirection: 'row',
        alignItems: 'center',
        flex: 1,
    },
    spotItemText: {
        fontSize: 16,
        color: '#333',
        fontWeight: '500',
    },
    requiredMark: {
        fontSize: 16,
        color: '#ff4444',
        marginLeft: 4,
    },
    spotItemRight: {
        alignItems: 'flex-end',
    },
    spotItemStatus: {
        fontSize: 14,
        color: '#666',
    },
    checkCategoryCard: {
        backgroundColor: '#fff',
        borderRadius: 10,
        marginBottom: 14,
        padding: 12,
        shadowColor: '#000',
        shadowOpacity: 0.04,
        shadowRadius: 4,
        shadowOffset: { width: 0, height: 2 },
        elevation: 2,
    },
    checkCategoryTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#333',
        marginBottom: 10,
        paddingBottom: 8,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
    },
    checkItemRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: 8,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0',
    },
    checkItemName: {
        fontSize: 14,
        color: '#333',
        flex: 1,
        marginRight: 10,
    },
    uploadCard: {
        backgroundColor: '#fff',
        borderRadius: 10,
        marginBottom: 14,
        padding: 12,
        shadowColor: '#000',
        shadowOpacity: 0.04,
        shadowRadius: 4,
        shadowOffset: { width: 0, height: 2 },
        elevation: 2,
    },
    uploadTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#333',
        marginBottom: 10,
        paddingBottom: 8,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
    },
    uploadArea: {
        width: 70,
        height: 70,
        backgroundColor: '#f5f5f5',
        borderRadius: 8,
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: 1,
        borderColor: '#e0e0e0',
        borderStyle: 'dashed',
    },
    imagesRow: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginTop: 10,
    },
    imageItem: {
        position: 'relative',
        marginRight: 10,
        marginBottom: 10,
    },
    uploadIconContainer: {
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 8,
    },
    uploadIcon: {
        width: 32,
        height: 32,
        tintColor: '#999',
    },
    uploadText: {
        fontSize: 12,
        color: '#999',
    },
    uploadedImagesContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginTop: 15,
        paddingHorizontal: 12,
    },
    uploadedImageWrapper: {
        position: 'relative',
        marginRight: 10,
        marginBottom: 10,
    },
    uploadedImage: {
        width: 70,
        height: 70,
        borderRadius: 8,
    },
    removeImageButton: {
        position: 'absolute',
        top: 0,
        right: 0,
        width: 17,
        height: 17,
        justifyContent: 'center',
        alignItems: 'center',
    },
    removeImageText: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 'bold',
    },
    removeImageIcon: {
        width: 16,
        height: 16,
    },
    uploadedImageContainer: {
        position: 'relative',
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
    },
    uploadedImageInArea: {
        width: '100%',
        height: '100%',
        borderRadius: 8,
        resizeMode: 'cover',
    },
    removeImageButtonInArea: {
        position: 'absolute',
        top: -5,
        right: -5,
        width: 20,
        height: 20,
        borderRadius: 10,
        backgroundColor: '#ff4444',
        justifyContent: 'center',
        alignItems: 'center',
    },
    saveButton: {
        backgroundColor: '#0076ff',
        borderRadius: 8,
        paddingVertical: 12,
        paddingHorizontal: 20,
        // marginTop: 10,
        marginBottom: 10,
        alignItems: 'center',
        justifyContent: 'center',
    },
    saveButtonText: {
        color: '#fff',
        fontSize: 16,
        fontWeight: 'bold',
    },
    // 复核模态框样式
    confirmModalContainer: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    confirmModalContent: {
        backgroundColor: '#fff',
        borderRadius: 10,
        padding: 20,
        width: '80%',
        maxWidth: 400,
    },
    confirmModalTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#333',
        marginBottom: 15,
        textAlign: 'center',
    },
    confirmInput: {
        borderWidth: 1,
        borderColor: '#ddd',
        borderRadius: 8,
        padding: 12,
        fontSize: 16,
        minHeight: 100,
        marginBottom: 20,
    },
    confirmButtonRow: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        gap: 10,
    },
    cancelButton: {
        borderWidth: 1,
        borderColor: '#0076ff',
        borderRadius: 6,
        paddingVertical: 8,
        paddingHorizontal: 16,
        backgroundColor: '#fff',
    },
    cancelButtonText: {
        color: '#0076ff',
        fontSize: 16,
    },
    confirmButton: {
        backgroundColor: '#0076ff',
        borderRadius: 6,
        paddingVertical: 8,
        paddingHorizontal: 16,
    },
    confirmButtonText: {
        color: '#fff',
        fontSize: 16,
        fontWeight: 'bold',
    },
    // 复核意见卡片样式
    confirmRemarkCard: {
        backgroundColor: '#fff',
        borderRadius: 10,
        marginBottom: 14,
        padding: 12,
        shadowColor: '#000',
        shadowOpacity: 0.04,
        shadowRadius: 4,
        shadowOffset: { width: 0, height: 2 },
        elevation: 2,
    },
    confirmRemarkTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#333',
        marginBottom: 8,
        paddingBottom: 8,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
    },
    confirmRemarkContent: {
        fontSize: 14,
        color: '#666',
        lineHeight: 20,
    },
});

export default DeviceSpotDetail; 